<div fxFlexLayout="row wrap" fxLayoutAlign="center center" fxLayout="space-around">

  <div *ngIf="page == 'language-select'" [class.show]="page == 'language-select'" class="step" fxFlex="1 1">
    <h3>{{title}}</h3>
    <mat-card [ngClass]="{'selected': selected == 1}" (click)="page = 'app'" class="selectable">
      <div fxLayout="row wrap" fxLayoutAlign="center center">
        <div fxFlex="1 1 30%">
          <i style="color: #80bd01" class="cbp-ig-icon devicon-nodejs-plain"></i>
        </div>
        <div fxFlex="1 1 30%">
          NodeJS
        </div>
      </div>
    </mat-card>
    <mat-card [ngClass]="{'selected': selected == 2}" (click)="page = 'app'" class="selectable">
      <div fxLayout="row wrap" fxLayoutAlign="center center">
        <div fxFlex="1 1 30%">
          <i style="color: #4dd0e1" class="cbp-ig-icon devicon-go-plain"></i>
        </div>
        <div fxFlex="1 1 30%">
          Go
        </div>
      </div>
    </mat-card>
    <mat-card [ngClass]="{'selected': selected == 3}" (click)="page = 'app'" class="selectable">
      <div fxLayout="row wrap" fxLayoutAlign="center center">
        <div fxFlex="1 1 30%">
          <i style="color: #0074c1" class="cbp-ig-icon devicon-typescript-plain"></i>
        </div>
        <div fxFlex="1 1 30%">
          TypeScript
        </div>
      </div>
    </mat-card>
  </div>
  <div *ngIf="page == 'app'" [class.show]="page == 'app'" class="step" fxFlex="1 1">
    <h3>{{title}}</h3>
    <mat-card style="margin-bottom: 1em;">

      <div fxLayout="row wrap" fxLayoutAlign="space-between">
        <div fxFlex="1 1 69%">
          <mat-card-title>
            <div class="method">GET</div> /hello</mat-card-title>
        </div>
        <ace-editor class="editor" [text]="code" [mode]="'golang'" style="min-height: 5em; width:100%;
          overflow: auto;" #editor></ace-editor>
        <button #saveButton (click)="page = 'terminal'; typeTerminal()" mat-raised-button color="primary" style="color: white;margin-top: 1em;">Save</button>
      </div>
    </mat-card>
  </div>
  <div *ngIf="page == 'terminal'" [class.show]="page == 'terminal'" class="step" fxFlex="1 1">
    <h3>{{title}}</h3>
    <mat-card style="margin-bottom: 1em;">
      <div fxLayout="row wrap" fxLayoutAlign="space-between">

        <ace-editor class="editor" [text]="terminal" [mode]="'sh'" style="min-height: 5em; width:100%;
            overflow: auto;" #editor></ace-editor>

      </div>
    </mat-card>
  </div>
</div>